// 动效时长
$motion-duration-scale: 1;
$motion-duration-xl: 350ms * $motion-duration-scale;
$motion-duration-lg: 300ms * $motion-duration-scale;
$motion-duration-md: 250ms * $motion-duration-scale;
$motion-duration-sm: 200ms * $motion-duration-scale;
$motion-duration-xs: 150ms * $motion-duration-scale;
$motion-duration-xxs: 100ms * $motion-duration-scale;

// 动效曲线
$motion-func-ease: cubic-bezier(0.4, 0, 0.2, 1); //标准曲线
$motion-func-ease-in: cubic-bezier(0.4, 0, 1, 1); //加速曲线
$motion-func-ease-out: cubic-bezier(0, 0, 0.2, 1); //减速曲线
$motion-func-ease-in-out: cubic-bezier(0.33, 0, 0.67, 1); //锐利曲线

// 鼠标触发状态的渐变动画
@mixin motion-state {
  transition-timing-function: $motion-func-ease;
  transition-duration: $motion-duration-sm;
  transition-property: all;
}

@mixin motion-input {
  @include motion-state;

  transition-property: font-size, color, border-color, background-color;
}

// checkbox动画
@mixin motion-checkbox {
  transition: opacity $motion-duration-sm $motion-func-ease-in-out, background $motion-duration-sm $motion-func-ease-in-out,
    transform $motion-duration-sm $motion-func-ease;
}

// radio动画
@mixin motion-radio {
  transition: all $motion-duration-sm $motion-func-ease-in-out;
}

@mixin motion-radio-inside {
  transition: opacity $motion-duration-sm $motion-func-ease-in-out, width $motion-duration-sm $motion-func-ease,
    height $motion-duration-sm $motion-func-ease, transform $motion-duration-sm $motion-func-ease;
}

// form组件的辅助文本和错误提示文本出现动画
@mixin motion-form-text {
  animation: slipDown $motion-duration-sm $motion-func-ease-out, lvMFadeIn $motion-duration-sm $motion-func-ease-in-out;
}

// Select trigger 图标动画
@mixin select-trigger-icon {
  path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    d: path('M2,5 L8,11 L14,5');
  }
}

@mixin select-trigger-icon-close {
  path {
    animation: anim-trigger-close $motion-duration-xs $motion-func-ease-in-out forwards;
  }
}

@mixin select-trigger-icon-open {
  path {
    animation: anim-trigger-open $motion-duration-sm $motion-func-ease-in-out forwards;
  }
}

@mixin motion-tabs-item {
  transition: font-weight, color, background-color $motion-duration-xxs $motion-func-ease-in-out;
}

@mixin motion-tabs-indicator {
  transition: all $motion-duration-md $motion-func-ease;
}

@mixin motion-bg {
  transition: background-color $motion-duration-sm $motion-func-ease;
}

@keyframes anim-trigger-open {
  0% {
    d: path('M2,5 L8,11 L14,5');
  }

  50% {
    d: path('M0,8 L8,8 L16,8');
  }

  100% {
    d: path('M2,10 L8,5 L14,10');
  }
}

@keyframes anim-trigger-close {
  0% {
    d: path('M2,10 L8,5 L14,10');
  }

  50% {
    d: path('M0,8 L8,8 L16,8');
  }

  100% {
    d: path('M2,5 L8,11 L14,5');
  }
}

.lv-m-rotate {
  animation: 2s linear infinite lvMRotate;
}

@keyframes lvMRotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes lvMFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes lvMFadeInDown {
  from {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes lvMFormInvalid {
  0% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0.05rem);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slipDown {
  from {
    transform: translateY(-0.1rem);
  }
  to {
    transform: translateY(0);
  }
}
